单文件组件的使用

项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码

index.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <div id='app'><App>App>div>

    
    <script src="./index.js">script>
body>
html>

main.js

// 引入vue和App组件
import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'#app',
    // 渲染App组件中的内容,返回给index.html文件使用
    render:function(creater){
        return creater(App)
    }
})

App.vue

<template>
    
    <div>单文件组件div>
template>


<script>
    // 指定js内容
// export default {

// }
script>

<style>
/* 指定css内容 */
style>

项目打包

文件编写完成后并不能直接运行index.html产生效果,需要对项目进行打包生成一个渲染后的index.js文件进行使用

npm run build

打包后会在当前目录下生成一个index.js 文件,在index.html中引用该文件,运行index.html文件看到效果

项目调试运行

每次我们需要看到组件效果需要手动生成一个index.js文件,这是我们可以借助webpack-dev-server自动运行我们的代码

// 在项目目录下,执行下面指令可以开启前端服务,自动运行前端代码
./node_modules/.bin/webpack-dev-server
powered by GitbookFile Modify: 2019-04-04 20:07:13